<%@ page import="com.lagou.studentsystem.model.User" %>
<%@ page import="com.lagou.studentsystem.model.Student" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生信息管理系统-管理页面</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.css" rel="stylesheet">
    <script src="jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="bootstrap.min.js" type="text/javascript"></script>
</head>
<style type="text/css">
    .pagination_div {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<body>
<div class="page-header" style="margin-left: 50px">
    <h1>
        学生管理系统
    </h1>
</div>
<div class="col-md-2 column" style="width: 250px;margin-left: -10px" >
    <button class=" btn btn-primary" id="class_management" >班级信息管理</button>
    <button class=" btn btn-primary" id="student_management" >学生信息管理</button>
</div>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <h1 style="margin-top: 50px;margin-bottom: 50px">
                登陆成功，欢迎<%=((User) session.getAttribute("user")).getUserName()%>使用</h1>
            <div style="margin-left: 640px;margin-bottom: 50px">
                <caption>
                    <button class=" btn btn-primary" id="user_add" data-toggle="modal" data-target="#myModal">新增</button>
                    <button class="btn btn-primary" id="user_delete" type="submit">删除</button>
                    <button class="btn btn-primary" id="user_edit" data-toggle="modal" data-target="#myModal">编辑
                    </button>
                    <button class="btn btn-primary" id="user_find" type="submit">查询</button>
                    <input type="text" id="s_code" placeholder="按工号查询" style="width: 130px;" name="s_code">
                    <input type="text" id="s_username" placeholder="按姓名查询" style="width: 130px;" name="s_username">
                </caption>
            </div>
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>
                    </th>
                    <th>
                        学号
                    </th>
                    <th>
                        姓名
                    </th>
                    <th>
                        性别
                    </th>
                    <th>
                        出生日期
                    </th>
                    <th>
                        邮箱
                    </th>
                    <th>
                        所属班级
                    </th>
                    <th>
                        备注
                    </th>
                </tr>
                </thead>
                <tbody>

                <%
                    List<Student> studentList = (List) session.getAttribute("studentList");
                    int size = studentList.size();
                    for (int i = 0; i < studentList.size(); i++) {
                %>
                <tr>
                    <td>
                        <label>
                            <input type="checkbox" name="checkbox">
                        </label>
                    </td>
                    <td id="tdm_code"><%=studentList.get(i).getStu_id()%>
                    </td>
                    <td id="tdm_username"><%=studentList.get(i).getStu_name()%>
                    </td>
                    <td id="tdm_sex"><%=studentList.get(i).getStu_sex()%>
                    </td>
                    <td id="tdm_birthday"><%=studentList.get(i).getStu_birthday() %>
                    </td>
                    <td id="tdm_email"><%=studentList.get(i).getStu_email() %>
                    </td>
                    <td id="tdstu_remarks"><%=studentList.get(i).getStu_class() %>
                    </td>
                    </td>
                    <td id="tdstu_remarks"><%=studentList.get(i).getStu_remarks() %>
                    </td>
                    <%
                        }
                    %>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>


<!-- 模态框 -->
<div class="modal" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" aria-hidden="true">
                    <span>&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel"> 新增用户</h4>
            </div>
            <form action="InsertStudent" method="post" role="form" id="from_action">
                <div class="modal-body" id="modal-body">
                    <label for="name">学号</label>
                    <input type="text" class="form-control" id="m_code" placeholder="请输入学号" name="m_code">
                    <input type="text" hidden="hidden" id="oldStudentId" name="oldStudentId">
                    <label for="name">姓名</label>
                    <input type="text" class="form-control" id="m_username" placeholder="请输入姓名" name="m_username">

                    <label for="name">性别</label>
                    <input type="text" class="form-control" id="m_sex" placeholder="请输入性别" name="m_sex">

                    <label for="name">出生日期</label>
                    <input type="date" class="form-control" id="m_birthday" placeholder="请输入出生日期" name="m_birthday">

                    <label for="name">邮箱</label>
                    <input type="text" class="form-control" id="m_email" placeholder="请输入邮箱" name="m_email">
                    <div>
                    <label for="name">所属班级</label>
                        <div></div>
                    <select id="m_stuclass" name="stu_class">
                        <option>一年级</option>
                        <option>二年级</option>
                        <option>三年级</option>
                        <option>四年级</option>
                    </select>
                    </div>
                    <label for="name">备注</label>
                    <input type="text" class="form-control" id="stu_remarks" placeholder="请输入备注信息" name="stu_remarks">
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">提交更改</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="pagination_div">

    <ul class="pagination">
        <%
            // 声明一个局部变量i负责来实现当前页和上一页以及下一页的控制
            int i = 1;
            // 声明一个变量来获取总页数
            int len = studentList.size()/10+1;
        %>

        <li><a href="studentPageQueryServlet?page=<%=(i>1?--i:i)%>">&laquo;上一页</a></li>
        <%
            // 循环显示所有页码
            for (int j = 1; j <= len; j++) {
                // 当页码过多时需要使用...来代表，此时的编写思路就是采用条件判断
                // 若j的数值大于某个范围且小于某个范围时，把打印j的位置换成...即可
                // 当然随着当前页的改变也会随之改变，这就是纯JavaSE功底了，没时间写了...
                //if (j == i) {
        %>
        <li><a href="studentPageQueryServlet?page=<%=j%>" id=<%=j%>> <%=j%> </a></li>
        <%--<li class="active"><a href="studentPageQueryServlet?page=<%=i%>" id=<%=i%>> <%=i%> </a></li>--%>
        <%
                //}
            }
        %>
        <li><a href="studentPageQueryServlet?page=<%=(i<len?++i:i)%>">&raquo;下一页</a></li>
        <%--<li><a href="#">总共<%=len%>页</a></li>--%>
    </ul>

</div>
<script type="text/javascript">

    // 删除用户
    $("#user_delete").on("click", function () {
        var checkbox = $("input[type='checkbox']");  // 获取所有的复选框
        let f = false;  // 是否选中用户的标记
        for (var i = 0; i < checkbox.length; i++) {
            var box = checkbox[i];
            if (box.checked) {   // 某个复选框被选中的
                f = true;  // 标记 有复选框被选中
                box = $(box);  // jsdom对象转换成jquery对象
                let studentId = box.parent().parent().next().text();  // 复选框父级的兄弟#code元素
                window.location = ("removeStudent?studentId=" + studentId);
            }
        }
        if (!f) {
            alert("请选择一个用户！");
        }
    });

    // 新增用户
    $("#user_add").on("click", function () {
        $("#from_action").attr("action", "InsertStudent");

    });

    // 编辑用户
    $("#user_edit").on("click", function () {
        var checkboxs = $("input[type='checkbox']");
        let f = false;
        for (var i = 0; i < checkboxs.length; i++) {
            var box = checkboxs[i];
            if (box.checked) {  // 某个复选框被选中的
                f = true;
                $(this).attr("data-toggle", "modal");     // 启用模态框
                $(this).attr("data-target", "#myModal");  // 启用模态框
                box = $(box);  // jsdom对象转换成jquery对象
                // 获取表格中选中用户的各项数据
                var code = box.parent().parent().siblings("#tdm_code").text();
                var username = box.parent().parent().siblings("#tdm_username").text();
                var sex = box.parent().parent().siblings("#tdm_sex").text();
                var email = box.parent().parent().siblings("#tdm_email").text();
                var birthday = box.parent().parent().siblings("#tdm_birthday").text();
                var remarks = box.parent().parent().siblings("#tdstu_remarks").text();

                // 选中用户的各项数据，放在模态框对应的input框中
                $("#m_code").val(code);
                $("#m_username").val(username);
                $("#m_sex").val(sex);
                $("#m_email").val(email);
                $("#m_birthday").val(birthday);
                $("#stu_remarks").val(remarks);
                $("#from_action").attr("action", "updateStudent");
                $("#oldStudentId").val(code);
            }
        }
        if (!f) {
            alert("请选择一个用户！");
            $(this).attr("data-toggle", "null");     // 禁用模态框
            $(this).attr("data-target", "null");  // 禁用模态框
        }
    });


    // 查询用户
    $("#user_find").on("click", function () {
        var code = $("#s_code").val();
        var username = $("#s_username").val();
        if (code == "" && username == "") {
            alert("请输入查询条件！（姓名或者工号）");
        }
        window.location = ("findStudentByidOrName?id=" + code + "&name=" + username);
    });

    $("#returnMain").on("click", function () {
        window.location = ("findStudentAll");
    });


    $("#student_management").on("click", function () {
        window.location = ("findStudentAll");
    });

    $("#class_management").on("click", function () {
        window.location = ("findClassesAll");
    });

</script>

</body>
</html>
